﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>改善简易计算器</title>
  <script type="text/javascript">
    function compute(obj) {

      var txtNum1 = Number(document.getElementById("txtNum1").value);
      var txtNum2 = Number(document.getElementById("txtNum2").value);

      switch (obj) {
        case '+':
          txtResult.value = txtNum1 + txtNum2;
          break;
        case '-':
          txtResult.value = txtNum1 - txtNum2;
          break;
        case '*':
          txtResult.value = txtNum1 * txtNum2;
          break;
        case '/':
          txtResult.value = txtNum1 / txtNum2;
          break;
        default:
          txtResult.value = "未知错误";
      }

    }
  </script>
</head>

<body>
  <form action="" method="post" id="myform" name="myform">
    <table border="0">
      <tr>
        <td><img src="images/shop.gif" width="54" height="54" /></td>
        <td colspan="3">
          <h3>改善简易计算器</h3>
        </td>
      </tr>
      <tr>
        <td>第一个数</td>
        <td colspan="3">
          <input name="txtNum1" type="text" id="txtNum1" size="25" />
        </td>
      </tr>
      <tr>
        <td>第二个数</td>
        <td colspan="3">
          <input name="txtNum2" type="text" id="txtNum2" size="25" />
        </td>
      </tr>
      <tr>
        <td>
          <input name="addButton2" type="button" id="addButton2" value="  ＋  " onClick="compute('+')" />
        </td>
        <td>
          <input name="subButton2" type="button" id="subButton2" value="  －  " onClick="compute('-')" />
        </td>
        <td>
          <input name="mulButton2" type="button" id="mulButton2" value="  ×  " onClick="compute('*')" />
        </td>
        <td>
          <input name="divButton2" type="button" id="divButton2" value="  ÷  " onClick="compute('/')" />
        </td>
      </tr>
      <tr>
        <td>计算结果</td>
        <td colspan="3">
          <input name="txtResult" type="text" readonly id="txtResult" size="25" />
        </td>
      </tr>
    </table>
  </form>
</body>

</html>